<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html5新标签</title>
		<style type="text/css">
			/* 
		   【1】，HTML5标签的特点：语义化标签。
			<header>   -->头部
			<footer>   -->底部
			<article>  -->主体
			<aside>    -->主体侧栏
			<section>  -->主体内容
			<nav>      -->导航栏
			<figure>   -->相当于dl dt dd
			<figcaption>-->相当于dl dt dd
			<mark>     -->高亮标记
			【2】,TML5 中的一些有趣的新特性：
			    用于绘画的 canvas 元素
			    用于媒介回放的 video 和 audio 元素
			    对本地离线存储的更好的支持
			    新的特殊内容元素，比如 article、footer、header、nav、section
			    新的表单控件，比如 calendar、date、time、email、url、search

			 */
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				text-align:center;
				font-size:1.2em;
			}
			#head{
				width:960px;
				height:100px;
				margin:0 auto;
				background-color:red;
				color:black;
			}
			#main{
				width:960px;
				height:600px;
				margin:0 auto;
				padding:0;
				color:black;
			}
			#left{
				width:260px;
				height:600px;
				margin:0 auto;
				padding:0;
				background-color:blue;
				color:black;
				float:left;
			}
			#right{
				width:700px;
				height:600px;
				margin:0 auto;
				padding:0;
				background-color:green;
				color:black;
				float:right;
			}
			#foot{
				width:960px;
				height:80px;
				margin:0 auto;
				margin-bottom:100px;
				padding:0;
				background-color:cadetblue;
				color:black;
			}
			
			header{
				width:960px;
				height:100px;
				margin:0 auto;
				background-color:red;
				color:black;
			}
			#main{
				width:960px;
				height:600px;
				margin:0 auto;
				padding:0;
				color:black;
			}
			aside{
				width:260px;
				height:600px;
				margin:0 auto;
				padding:0;
				background-color:blue;
				color:black;
				float:left;
			}
			article{
				width:700px;
				height:600px;
				margin:0 auto;
				padding:0;
				background-color:green;
				color:black;
				float:right;
			}
			footer{
				width:960px;
				height:80px;
				margin:0 auto;
				padding:0;
				background-color:cadetblue;
				color:black;
			}
			.box{
				width:200px;
				height:250px;
				background-color:fuchsia;
				margin:10px;
				padding:0;
				float:left;
			}
			section{
				width:200px;
				height:250px;
				background-color:fuchsia;
				margin:10px;
				padding:0;
				float:left;
			}
			#menu{
				width:960px;
				height:50px;
				margin:0 auto;
				padding:0;
				background-color:black;
				color:red;
			}
			nav{
				width:960px;
				height:50px;
				margin:0 auto;
				padding:0;
				background-color:black;
				color:red;
			}
		</style>
		<script type="text/javascript"></script>
	</head>
	<body>
		<div id="head">我是头部</div>
		<div id="menu">导航栏</div>
		<div id="main">
			<div id="left">我是主体右侧部分</div>
			<div id="right">
				<p>我是主体左侧部分</p>
			<div class="box">
				<dl>
					<dt><img src="img/2.png" alt="2.png" style="width:200px; height:200px;"></dt>
					<dd>头像图片展示</dd>
				</dl>
			</div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			</div>
		</div>
		<div id="foot">我是底部</div>
		
		<header>我是头部</header>
		<nav>导航栏</nav>
		<div id="main">
			<aside id="left">我是主体右侧部分</aside>
			<article id="right">
				<p>我是主体左侧部分</p>
			  <section>
				  <figure>
					  <img src="img/2.png" alt="2.png" style="width:200px; height:200px;">
					  <figcaption><mark>头像</mark>图片展示</figcaption>
				  </figure>
			  </section>
			  <section></section>
			  <section></section>
		      <section></section>
			  <section></section>
		      <section></section>
			</article>
		</div>
		<footer>我是底部</footer>
	</body>
</html>
